<template>
    <!--个人资料-->
    <div class="contain">
        <div class="title">个人资料</div>
        <a-alert message="请完善以下信息,方便我们更好的为您服务" type="info" show-icon />
        <div class="content">
            <a-form-model ref=form :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
                <div class="image-upload">
                    <a-upload
                        :action="updateImageUrl"
                        :show-upload-list="false"
                        :before-upload="beforeUpload"
                        @change="handleChange"
                    >
                        <img class="avatar" :src="imageUrl" alt="" />
                        <div class="span-link" v-if="imageUrl">更换头像</div>
                        <div class="span-link" v-else>上传头像</div>
                    </a-upload>
                </div>
                <a-row>
                    <a-col :span="12">
                        <a-form-model-item label="学号" prop="id">
                            <a-input v-model="form.id" placeholder="由系统自动生成" disabled/>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="12">
                        <span class="span-info">由系统自动生成不可修改</span>
                    </a-col>
                </a-row>
                <a-row>
                    <a-col :span="12">
                        <a-form-model-item label="昵称">
                            <a-input v-model="form.name" placeholder="请输入昵称"/>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="12">
                        <span class="span-info">未设置系统默认为手机号</span>
                    </a-col>
                </a-row>
                <a-row>
                    <a-col :span="12">
                        <a-form-model-item label="手机号" prop="phone">
                            <a-input v-model="form.phone" placeholder="请绑定手机号" disabled/>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="12">
                        <span  class="span-link" @click="jumpChangePhone">更换手机号</span>
                    </a-col>
                </a-row>
                <a-row>
                    <a-col :span="12">
                        <a-form-model-item label="出生年月">
                            <a-date-picker v-model="form.csny"  placeholder="请选择日期"></a-date-picker>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item :labelCol="{span:4}" :wrapperCol="{span:7}" label="性别" prop="sex">
                            <a-radio-group name="sex" v-model="form.sex" default-value="男">
                                <a-radio value="男">
                                    男
                                </a-radio>
                                <a-radio value="女">
                                    女
                                </a-radio>
                            </a-radio-group>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-form-model-item  :labelCol="{span:4}" :wrapperCol="{span:14}" label="联系地址">
                    <a-input v-model="form.address" placeholder="请输入联系地址"/>
                </a-form-model-item>
                <a-form-item :labelCol="{span:4}" :wrapperCol="{span:7}" label="身份">
                    <a-radio-group name="sex" v-model="form.sf" button-style="solid" default-value="在职">
                        <a-radio-button value="在职">
                            在职
                        </a-radio-button>
                        <a-radio-button value="学生">
                            学生
                        </a-radio-button>
                        <a-radio-button value="其他">
                            其他
                        </a-radio-button>
                    </a-radio-group>
                </a-form-item>
                <a-form-model-item  :labelCol="{span:4}" :wrapperCol="{span:7}" label="学历">
                    <a-select v-model="form.xl" placeholder="请输入最高学历">
                        <a-select-option value="中专">
                            中专
                        </a-select-option>
                        <a-select-option value="大专">
                            大专
                        </a-select-option>
                        <a-select-option value="本科">
                            本科
                        </a-select-option>
                        <a-select-option value="研究生及以上">
                           研究生及以上
                        </a-select-option>
                    </a-select>
                </a-form-model-item>
                <a-form-model-item  :labelCol="{span:4}" :wrapperCol="{span:7}" label="学校名称" v-if="form.sf==='学生'">
                    <a-input v-model="form.xxname" placeholder="请输入学校名称"/>
                </a-form-model-item>
                <a-form-model-item  :labelCol="{span:4}" :wrapperCol="{span:7}" label="专业名称" v-if="form.sf==='学生'">
                    <a-input v-model="form.zyname" placeholder="请输入专业名称"/>
                </a-form-model-item>
                <a-form-model-item  :labelCol="{span:4}" :wrapperCol="{span:7}" label="入学时间" v-if="form.sf==='学生'">
                    <a-date-picker v-model="form.rx_time" placeholder="请选择入学时间"></a-date-picker>
                </a-form-model-item>
                <a-form-model-item style="text-align: center;margin-left: 25%">
                    <a-button type="primary" html-type="submit" @click="onSubmit">
                        保存
                    </a-button>
                </a-form-model-item>
            </a-form-model>
        </div>
    </div>
</template>
<script>
import Vue from 'vue';
import aesUtil from '../../../plugins/common/aesUtil';
export default {
    name: 'personMsg',
    components: {
        /**/
    },
    data() {
        return {
            updateImageUrl: '',
            labelCol: { span: 8 },
            wrapperCol: { span: 14 },
            loading: false,
            imageUrl: '',
            form: {
                username: null,
                password: null,
                password2: null,
                csny: null,
                name: null,
                sex: null,
                sf: '',
                address: null,
                xxname: null,
                zyname: null,
                rx_time: null,
                xl: null
            },
            rules: {
                id: [{ required: true, message: '学号为系统自动生成', trigger: 'change' }],
                phone: [{ required: true, message: '请输入联系电话', trigger: 'change' }],
                sex: [{ required: true, message: '请选择性别', trigger: 'change' }],
                address: [{ required: true, message: '请输入详细地址', trigger: 'change' }],
            },
        };
    },
    watch: {
        /**/
    },
    mounted() {
        this.updateImageUrl = this.$api.getAjaxUrl('def','upLoadImg');
        this.initPersonInfo()
    },
    methods: {
        initPersonInfo(){
            this.$api.ajaxData({
                pathName: 'getGrzl',
                authorization: true,
            }).then(res =>{
                this.form = res.obj;
                this.imageUrl = res.obj.toux
            }).catch(()=>{
                this.form = {}
            });
        },
        onSubmit(){
            let data = Object.assign(this.form, {
                toux: this.imageUrl,
                password: encodeURIComponent(aesUtil.encrypt(this.form.password))
            });
            this.$api.ajaxData({
                pathName: 'doPerfect',
                method: 'post',
                data: data
            }).then(() =>{
                this.$util.alert('更新成功');
                Vue.prototype.$util.setCookie('account', JSON.stringify(data));
                this.$emit('updateUserInfo')
            });
        },
        handleChange(info) {
            if (info.file.status === 'uploading') {
                this.loading = true;
                return;
            }
            if (info.file.status === 'done') {
                this.imageUrl = info.file.response.obj;
                this.loading = false;
            }
        },
        beforeUpload(file) {
            const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
            if (!isJpgOrPng) {
                this.$message.error('You can only upload JPG file!');
            }
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isLt2M) {
                this.$message.error('Image must smaller than 2MB!');
            }
            return isJpgOrPng && isLt2M;
        },
        jumpChangePhone() {
            this.$emit('switchNav',{
                name: '更换手机号',
                component: 'changePhoneNumber',
            })
        }
    }
};
</script>
<style scoped lang="scss">
    .contain {
        padding: 0 20px;
        border: 1px solid #f7f7f7;
        background: #fff;
        .title {
            height: 50px;
            line-height: 50px;
            font-size: 14px;
            font-weight: bold;
            color: #333;
            border-bottom: 1px solid #f7f7f7;
        }
        .content {
            padding: 30px 0;
            .image-upload {
                width: 70px;
                height: 70px;
                margin: 0 auto 60px;
                .avatar {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-radius: 50%;
                    width: 70px;
                    height: 70px;
                    max-width: inherit;
                    border: 1px solid #eee;
                    background: url(../../../assets/image/icon/u92.png) no-repeat;
                    background-size: contain;
                }
                .span-link {
                    text-align: center;
                }
            }
            .ant-input[disabled] {
                color: #333;
            }
            .span-info {
                line-height: 40px;
                color: #999;
            }
            .span-link {
                line-height: 40px;
                color: #007aff;
                cursor: pointer;
            }
        }
    }
</style>
